<template>
  <div class="app-container">
    <el-form :model="searchForm" :inline="true">
      <el-row>
        <el-col :span="20">
          <el-form-item>
            <el-input v-model="searchForm.fuzzy" style="width:250px" placeholder="样品编号/检测类别" clearable @keyup.enter.native="handleSearch" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="searchForm.judgePreType" clearable style="width:220px" filterable placeholder="请选择样品判定状态">
              <el-option value="1" label="待判定">待判定</el-option>
              <el-option value="2" label="需制备">需制备</el-option>
              <el-option value="3" label="无需制备">无需制备</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="iconfont icon-chaxun1" @click="handleSearch"> 查询</el-button>
            <el-button type="primary" class="iconfont el-icon-tickets" @click="handleBatchPre">&nbsp批量制备判定</el-button>
            <el-button type="primary" style="margin-left: 30px;" @click="allsWithoutPreparation">全部无需制备</el-button>
            <el-button type="primary" @click="allsWithoutPreparation">剩余无需制备</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table
        stripe
        border
        :data="preSampItemData"
        highlight-current-row
        :header-cell-style="{background:'#ECF3FC'}"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <template slot="empty">
          <div class="table_empty">
            <div class="empty_tips">
              <span>
                暂无数据
              </span>
            </div>
          </div>
        </template>
        <el-table-column type="selection" width="50" :selectable="checkSelectable" align="center" />
        <el-table-column type="index" width="50" label="序号" fixed="left" align="center" />
        <el-table-column prop="sampleNo" label="样品编号" fixed="left" min-width="150px" align="center" />
        <el-table-column prop="sampleNumber" label="客户送检样品编号" fixed="left" min-width="150px" align="center" />
        <el-table-column prop="secdClassName" label="检测类别" align="center" />
        <el-table-column prop="factorPoint" label="检测位置" align="center" />
        <el-table-column prop="factorName" label="检测因子" width="180" align="center">
          <template slot-scope="row">
            <el-tooltip effect="dark" placement="top">
              <div slot="content" style="max-width: 400px">{{ row.row.factorName}}</div>
              <div class="apostrophe">
                <span>{{ row.row.factorName}}</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="collectUser" label="采样人" align="center" />
        <el-table-column prop="storeLocation" label="放置地点" align="center" />
        <el-table-column prop="judgePreType" label="样品判定状态" width="130" align="center">
          <template slot-scope="{row}">
            <span v-if="row.judgePreType === 1"><el-tag effect="dark" style="background: #82848a;border:none">待判定</el-tag></span>
            <span v-if="row.judgePreType === 2"><el-tag effect="dark" style="background: #1890ff;border:none">需制备</el-tag></span>
            <span v-if="row.judgePreType === 3"><el-tag effect="dark" style="background: #13ce66;border:none">无需制备</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column prop="judgeUserName" label="样品制备员" width="130" align="center" />
        <el-table-column prop="storeTime" label="入库时间" width="160" align="center" />
        <el-table-column fixed="right" align="center" label="操作" width="200">
          <template slot-scope="{row}">
            <el-button type="text" v-if="row.judgePreType === 1" @click="handleSamplepreDetail(row)">制备判定</el-button>
            <el-button type="text" v-if="row.judgePreType != 1" @click="seeSamplepre(row)">查看</el-button>
            <el-button type="text" v-if="row.judgePreType != 1" @click="handleSamplepreDetail(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="searchForm.pageNumber"
        :limit.sync="searchForm.pageSize"
        @pagination="handleSearch"
      />
    </div>

    <!-- 样品制备判定 -->
    <el-dialog title="样品制备判定" :visible.sync="samplepreVisible" center width="28%" max-height="300px">
      <div style="width: 500px;margin:0 auto">
          <el-form :model="samplepreForm" label-width="120px">
            <el-form-item label="样品是否需制备:">
              <el-radio-group v-model="samplepreForm.judgePreType">
                <el-radio label="2">是</el-radio>
                <el-radio label="3">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="选择制备员:">
              <el-select v-model="judgeUserIdOne" placeholder="请选择" @change="getPreUserList"
                         :disabled="samplepreForm.judgePreType != 2" v-if="samplepreForm.judgePreType != 2">
                <el-option
                  v-for="item in preUserOptions"
                  :key="item.userId"
                  :label="item.empName"
                  :value="item.userId"/>
              </el-select>

              <el-select v-model="samplepreForm.judgeUserId" placeholder="请选择" @change="getPreUserList"
                         v-if="samplepreForm.judgePreType == 2">
                <el-option
                  v-for="item in preUserOptions"
                  :key="item.userId"
                  :label="item.empName"
                  :value="item.userId"/>
              </el-select>
            </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="margin-top: -30px;float: right;">
        <el-button @click="samplepreVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSamplepreDialog">确认</el-button>
      </div>
    </el-dialog>

    <!-- 查看样品制备 -->
    <el-dialog title="查看样品制备" :visible.sync="samplepreSeeVisible" center width="28%" max-height="300px">
      <div style="width: 500px;margin:0 auto">
        <el-form :model="samplepreForm" label-width="120px">
          <el-form-item label="样品是否需制备:">
            <el-radio-group v-model="samplepreForm.judgePreType" disabled>
              <el-radio label="2">是</el-radio>
              <el-radio label="3">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择制备员:">
            <el-select v-model="judgeUserIdOne" placeholder="请选择" @change="getPreUserList"
                       :disabled="samplepreForm.judgePreType != 2" v-if="samplepreForm.judgePreType != 2">
              <el-option
                v-for="item in preUserOptions"
                :key="item.userId"
                :label="item.empName"
                :value="item.userId"/>
            </el-select>

            <el-select v-model="samplepreForm.judgeUserId" placeholder="请选择" @change="getPreUserList"
                       v-if="samplepreForm.judgePreType == 2" disabled>
              <el-option
                v-for="item in preUserOptions"
                :key="item.userId"
                :label="item.empName"
                :value="item.userId"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="margin-top: -30px;float: right;">
        <el-button @click="samplepreSeeVisible=false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 样品制备批量操作 -->
    <el-dialog title="样品制备批量操作" :visible.sync="batchpreVisible" center width="28%" max-height="300px">
      <div style="width: 500px;margin:0 auto">
        <el-form :model="batchpreForm" label-width="120px">
          <el-form-item label="样品是否需制备:">
            <el-radio-group v-model="batchpreForm.judgePreType">
              <el-radio label="2">是</el-radio>
              <el-radio label="3">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="选择制备员:">
            <el-select v-model="judgeUserIdOne" placeholder="请选择" @change="getPreUserList"
                       :disabled="batchpreForm.judgePreType != 2" v-if="batchpreForm.judgePreType != 2">
              <el-option
                v-for="item in preUserOptions"
                :key="item.userId"
                :label="item.empName"
                :value="item.userId"/>
            </el-select>

            <el-select v-model="batchpreForm.judgeUserId" placeholder="请选择" @change="getPreUserList"
                       v-if="batchpreForm.judgePreType == 2">
              <el-option
                v-for="item in preUserOptions"
                :key="item.userId"
                :label="item.empName"
                :value="item.userId"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="margin-top: -30px;float: right;">
        <el-button @click="batchpreVisible=false">取消</el-button>
        <el-button type="primary" @click="batchSamplepreDialog">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as samplepreServer from '@/api/samplepre'
  import Pagination from '@/components/Pagination'
  export default {
    components: { Pagination },
    data() {
      return {
        preSampItemData: [],
        searchForm: {
          fuzzy: '',
          judgePreType: '',
          sampTaskId: '',
          pageNumber: 1,
          pageSize: 10
        },
        total: 0,
        samplepreVisible: false,
        samplepreForm: {
          sampItemId: '',
          judgePreType: '',
          judgeUserId: ''
        },
        judgeUserIdOne:'',
        preUserOptions: [],
        samplepreSeeVisible: false,
        batchpreForm: {
          sampItemIds: '',
          judgePreType: '',
          judgeUserId: ''
        },
        batchpreVisible: false,
        multipleSelection: []
      }
    },
    created() {
      this.handleSearch()
      this.getPreUserList()
    },
    methods: {
      handleSearch() {
        this.searchForm.sampTaskId = this.$route.params.sampTaskId;
        samplepreServer.findSampleBySampTaskId(this.searchForm).then(res => {
          if (res.code === 200) {
            this.preSampItemData = res.result.records
            this.total = res.result.total
          }
        })
      },

      handleSelectionChange(val) {
        this.multipleSelection = val
      },

      handleBatchPre() {
        if (this.multipleSelection && this.multipleSelection.length > 0) {
          const samples = this.multipleSelection.map(i => {
            return i.sampItemId
          })
          this.batchpreForm.sampItemIds = samples
          this.batchpreVisible = true
        } else {
          this.$message.warning('当前没有选择要制备判定的数据')
        }
      },

      // 查询制备员
      getPreUserList() {
        samplepreServer.preUserList().then(res => {
          this.preUserOptions = res.result || []
        })
      },

      // 修改数据回显
      handleSamplepreDetail(row) {
        this.samplepreForm.sampItemId = row.sampItemId
        this.samplepreForm.judgePreType = row.judgePreType.toString()
        this.samplepreForm.judgeUserId = row.judgeUserId
        this.samplepreVisible = true
      },

      // 保存样品制备
      confirmSamplepreDialog() {
        if (this.samplepreForm.judgePreType === '3' || this.samplepreForm.judgePreType === '1'){
          this.samplepreForm.judgeUserId = null;
        }
        if (this.samplepreForm.judgePreType === '2'){
          if (this.samplepreForm.judgeUserId === null || this.samplepreForm.judgeUserId === ''){
            this.$message.warning('请选择制备员')
            return
          }
        }
        samplepreServer.updateSamplePre(this.samplepreForm).then(res => {
          if (res.code === 200) {
            this.$notify({
              title: '成功',
              message: res.message,
              type: 'success'
            })
            this.samplepreVisible = false
            this.handleSearch()
          } else {
            this.$notify({
              title: '失败',
              message: res.message,
              type: 'error'
            })
          }
        })
      },

      // 查看
      seeSamplepre(row) {
        this.samplepreForm.sampItemId = row.sampItemId
        this.samplepreForm.judgePreType = row.judgePreType.toString()
        this.samplepreForm.judgeUserId = row.judgeUserId
        this.samplepreSeeVisible = true
      },

      // 保存样品制备批量操作
      batchSamplepreDialog() {
        if (this.batchpreForm.judgePreType === '3' || this.batchpreForm.judgePreType === '1'){
          this.batchpreForm.judgeUserId = null;
        }
        if (this.batchpreForm.judgePreType === '2'){
          if (this.batchpreForm.judgeUserId === null || this.batchpreForm.judgeUserId === ''){
            this.$message.warning('请选择制备员')
            return
          }
        }
        samplepreServer.batchSamplePreJudge(this.batchpreForm).then(res => {
          if (res.code === 200) {
            this.$notify({
              title: '成功',
              message: res.message,
              type: 'success'
            })
            this.batchpreForm = {sampItemIds: '', judgePreType: '', judgeUserId: ''}
            this.batchpreVisible = false
            this.handleSearch()
          } else {
            this.$notify({
              title: '失败',
              message: res.message,
              type: 'error'
            })
          }
        })
      },

      checkSelectable(item) {
        if (item.judgePreType === 2 || item.judgePreType === 3) {
          return false
        }else {
          return true
        }
      },

      // 全部无需制备
      allsWithoutPreparation() {
        if (this.preSampItemData.length > 0){
          let item = this.preSampItemData.findIndex(i => {return i.judgePreType === 1});
          if (item === -1){
            this.$message.warning('至少有一条待判定状态的数据，才能进行无需制备操作')
            return
          }
        }else {
          this.$message.warning('当前没有要操作的数据')
          return
        }
        let sampTaskId = {sampTaskId: this.searchForm.sampTaskId}
        samplepreServer.allWithoutPreparation(sampTaskId).then(res => {
          if (res.code === 200) {
            this.$notify({
              title: '成功',
              message: res.message,
              type: 'success'
            })
            this.handleSearch()
          } else {
            this.$notify({
              title: '失败',
              message: res.message,
              type: 'error'
            })
          }
        })
      },

    }
  }
</script>

<style scoped lang="scss" type="text/scss">
  .search_div {
    >div {
      &:nth-child(1){
        margin-right: 10px;
      }
      display: inline-block;
    }
  }
  .search_input {
    width: 200px;
    margin-bottom: 5px;
  }
  .search-right {
    text-align: right;
    padding-right: 25px;
  }
  .item {
    font-size: 16px;
  }
  ::v-deep .el-card .el-card__header {
    padding: 5px 20px;
    background: #F3F2F2;
  }
  .apostrophe{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
</style>
